<template>
	<div class="alertBox">
		<div class="alertBk"></div>
		<div class="wordBox">
			<div class="alertHead">
				<p class="tittle">余额预警</p>
				<div class="myClose" @click="closeAlarm">
					<img src="~_assets/close.png" class="myClose"/>
				</div>
			</div>
			<div class="alertBody">
				<div class="changeDiv">
					<p class="alertText"><sup>*</sup>金额阀值:</p>
					<input type="text" class="alertInput" placeholder="请输入金额阀值" v-model="limitMoney" @blur="checkNumer($event,5,2,1,'limitMoney')"/>
          <span class="checkTxt" v-show="diffLimitMoney" style="color:red;right:6%;position: absolute;">与初录不一致</span>
				</div>
				<div class="changeDiv">
					<p class="alertText"><sup>*</sup>告警邮箱:</p>
					<input type="text" class="alertInput" placeholder="请输入告警邮箱" v-model="email" maxlength="30"/>
          <span class="checkTxt" v-show="diffEmail" style="color:red;right:6%;position: absolute;">与初录不一致</span>
				</div>
				<div class="alertBut">
					<button class="isFalse" @click="closeAlarm(0)">取消</button>
					<button class="isTrue" @click="closeAlarm(1)">确认</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { publicVM } from "@/config/public";

export default {
  mixins: [publicVM],
  props: ["num", "email1","repeatRecordContent"],
  data() {
    return {
      limitMoney: this.num || null,
      email: this.email1 || null,
      diffEmail:false,
      diffLimitMoney:false,
      repeatRecord:sessionStorage.getItem('repeatRecord')
    };
  },
  created(){
    if(this.repeatRecord == 1){
      this.diffLimitMoney = this.num != this.repeatRecordContent.moneyAlarmLimit
      this.diffEmail = this.email != this.repeatRecordContent.emailAlarm
    }
  },
  methods: {
    closeAlarm(type) {
      if (type == 1) {
        if (this.limitMoney && this.email) {
          var reg = new RegExp(
            "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
          );
          var myreg = /^\d+(\.\d{0,2})?$/;
          if (!myreg.test(this.limitMoney)) {
            this.$message({
              message: "金额阀值只能为数字或含有两位小数的数字!",
              type: "warning"
            });
          } else if (this.limitMoney<100) {
            this.$message({
              message: "金额阀值需高于100元!",
              type: "warning"
            });
          } else if (!reg.test(this.email)) {
            this.$message({
              message: "邮箱格式不正确!",
              type: "warning"
            });
          } else {
            this.$emit("closeAlarm", {
              money: this.limitMoney,
              email: this.email,
              isSame:!this.diffEmail && !this.diffLimitMoney
            });
          }
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "error"
          });
        }
      } else {
        this.$emit("closeAlarm");
      }
    }
  },
  watch:{
    limitMoney(val){
      this.diffLimitMoney = this.repeatRecord == 1 && val != this.repeatRecordContent.moneyAlarmLimit
    },
    email(val){
      this.diffEmail = this.repeatRecord == 1 && val != this.repeatRecordContent.emailAlarm
    }
  }
};
</script>

<style>
</style>